// 轮播 开始
function lunbo() {
  var mySwiper = new Swiper('#lunbo1', {
    loop: true, // 循环模式选项
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
      delay: 2000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    parallax: true,
    speed: 800
  })
}

$.ajax({
  type: 'get',
  url: 'http://iwenwiki.com/api/blueberrypai/getIndexBanner.php',


  success: function (res) {
    // http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg

    // http://iwenwiki.com/api/blueberrypai/indexImg/banner1.jpg
    res = JSON.stringify(res);
    res = res.replace(/www.wwtliu.com\/sxtstu/g, 'iwenwiki.com/api');
    res = JSON.parse(res);
    var str = '';
    var arr = res.banner;
    for (var i = 0; i < arr.length; i++) {
      str += `<div class="swiper-slide">
            <img src="${arr[i].img}" alt="">
            <div class="context" data-swiper-parallax-x="-1200" data-swiper-parallax-duration="1200">
                <h3>${arr[i].title}</h3>
                <p>${arr[i].content}</p>
            </div>
        </div>`;

    }
    $('.lunbo .swiper-wrapper').html(str);
    lunbo();
  }
})

// 轮播结束

// 乐章开始
function lunbo1(res) {
  new Swiper(res, {

    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },


  })
}



$.ajax({
  type: 'get',
  url: 'http://iwenwiki.com/api/blueberrypai/getIndexMovement.php',
  success: function (res) {
    // http://iwen.wiki/sxtstu/blueberrypai/indexImg/yuezhangPic_05.png
    // http://iwenwiki.com/api/blueberrypai/indexImg/yuezhangPic_01.jpg
    res = tupian(res)
    var arr = res.movement;

    for (var i = 0; i < arr.length; i++) {

      if (i < 4) {
        $('#yuezhang-box1').append(`<li>
        <div class="yuezhang-box1-l">
            <img src="${arr[i].img}" alt="">
        </div>
        <div class="yuezhang-box-r">
            <a href="">${arr[i].title}</a>
            <a href="">${arr[i].writer}</a>
            <p>${arr[i].content}</p>

            <div class="yuezhang-icon">
                <span class="iconfont">&#xe810;</span>
                <span>5/23</span><span>16:15</span>
            </div>
            <div class="yuezhang-zan">
                <span><span class="iconfont">&#xe630;</span>${arr[i].like}</span>
                <span><span class="iconfont">&#xe659;</span>${arr[i].message}</span>
            </div>
        </div>
    </li>`);
      } else if (i >= 4 && i <= 7) {
        $('#yuezhang-box2').append(`<li>
        <div class="yuezhang-box1-l">
            <img src="${arr[i].img}" alt="">
        </div>
        <div class="yuezhang-box-r">
            <a href="">${arr[i].title}</a>
            <a href="">${arr[i].writer}</a>
            <p>${arr[i].content}</p>

            <div class="yuezhang-icon">
                <span class="iconfont">&#xe810;</span>
                <span>5/23</span><span>16:15</span>

            </div>
            <div class="yuezhang-zan">
                <span><span class="iconfont">&#xe630;</span>${arr[i].like}</span>
                <span><span class="iconfont">&#xe659;</span>${arr[i].message}</span>
            </div>
        </div>
    </li>`);
      } else if (i >= 8 && i <= 11) {
        $('#yuezhang-box3').append(`<li>
        <div class="yuezhang-box1-l">
            <img src="${arr[i].img}" alt="">
        </div>
        <div class="yuezhang-box-r">
            <a href="">${arr[i].title}</a>
            <a href="">${arr[i].writer}</a>
            <p>${arr[i].content}</p>

            <div class="yuezhang-icon">
                <span class="iconfont">&#xe810;</span>
                <span>5/23</span><span>16:15</span>

            </div>
            <div class="yuezhang-zan">
                <span><span class="iconfont">&#xe630;</span>${arr[i].like}</span>
                <span><span class="iconfont">&#xe659;</span>${arr[i].message}</span>
            </div>
        </div>
    </li>`);
      } else if (i >= 12 && i <= 15) {
        $('#yuezhang-box4').append(`<li>
        <div class="yuezhang-box1-l">
            <img src="${arr[i].img}" alt="">
        </div>
        <div class="yuezhang-box-r">
            <a href="">${arr[i].title}</a>
            <a href="">${arr[i].writer}</a>
            <p>${arr[i].content}</p>

            <div class="yuezhang-icon">
                <span class="iconfont">&#xe810;</span>
                <span>5/23</span><span>16:15</span>
            </div>
            <div class="yuezhang-zan">
                <span><span class="iconfont">&#xe630;</span>${arr[i].like}</span>
                <span><span class="iconfont">&#xe659;</span>${arr[i].message}</span>
            </div>
        </div>
    </li>`);
      }
    }

    lunbo1('#lunbo2');
  }
})

function tupian(img) {
  img = JSON.stringify(img);
  img = img.replace(/iwen.wiki\/sxtstu/g, 'iwenwiki.com/api');
  img = JSON.parse(img);
  return img;
}
// 乐章结束

// 听说开始
// http://iwen.wiki/sxtstu/blueberrypai/indexImg/tingshuoIcon_13.png
// http://iwenwiki.com/api/blueberrypai/indexImg/tingshuoIcon_13.png

$.ajax({
  type: 'get',
  url: 'http://iwenwiki.com/api/blueberrypai/getIndexListening.php',
  success: function (res) {
    res = tupian(res);
    var arr = res.listening
    for (var i = 0; i < arr.length; i++) {

      $('.tingshuo-box').append(`<div class="tingshuo-box1">
      <img src="${arr[i].img}" alt="">
      <div class="sanjiao"></div>
  </div>
  <div class="tingshuo-box2">
      <h4>${arr[i].writer}</h4>
      <h3>${arr[i].title}</h3>
      <p>${arr[i].content}</p>
  </div>`)

    }


  }
})


// 听说结束
// 乐趣开始
$.ajax({
  type: 'get',
  url: 'http://iwenwiki.com/api/blueberrypai/getIndexInteresting.php',
  success: function (res) {
    // http://iwen.wiki/sxtstu/blueberrypai/indexImg/yuezhangPic_05.png
    // http://iwenwiki.com/api/blueberrypai/indexImg/yuezhangPic_01.jpg
    res = tupian(res)
    var arr = res.interesting;

    for (var i = 0; i < arr.length; i++) {

      if (i < 4) {
        $('#lequ-box1').append(`<li>
        <div class="yuezhang-box1-l">
            <img src="${arr[i].img}" alt="">
        </div>
        <div class="yuezhang-box-r">
            <a href="">${arr[i].title}</a>
            <a href="">${arr[i].writer}</a>
            <p>${arr[i].content}</p>

            <div class="yuezhang-icon">
                <span class="iconfont">&#xe810;</span>
                <span>5/23</span><span>16:15</span>
            </div>
            <div class="yuezhang-zan">
                <span><span class="iconfont">&#xe630;</span>${arr[i].like}</span>
                <span><span class="iconfont">&#xe659;</span>${arr[i].message}</span>
            </div>
        </div>
    </li>`);
      } else if (i >= 4 && i <= 7) {
        $('#lequ-box2').append(`<li>
        <div class="yuezhang-box1-l">
            <img src="${arr[i].img}" alt="">
        </div>
        <div class="yuezhang-box-r">
            <a href="">${arr[i].title}</a>
            <a href="">${arr[i].writer}</a>
            <p>${arr[i].content}</p>

            <div class="yuezhang-icon">
                <span class="iconfont">&#xe810;</span>
                <span>5/23</span><span>16:15</span>

            </div>
            <div class="yuezhang-zan">
                <span><span class="iconfont">&#xe630;</span>${arr[i].like}</span>
                <span><span class="iconfont">&#xe659;</span>${arr[i].message}</span>
            </div>
        </div>
    </li>`);
      } else if (i >= 8 && i <= 11) {
        $('#lequ-box3').append(`<li>
        <div class="yuezhang-box1-l">
            <img src="${arr[i].img}" alt="">
        </div>
        <div class="yuezhang-box-r">
            <a href="">${arr[i].title}</a>
            <a href="">${arr[i].writer}</a>
            <p>${arr[i].content}</p>

            <div class="yuezhang-icon">
                <span class="iconfont">&#xe810;</span>
                <span>5/23</span><span>16:15</span>

            </div>
            <div class="yuezhang-zan">
                <span><span class="iconfont">&#xe630;</span>${arr[i].like}</span>
                <span><span class="iconfont">&#xe659;</span>${arr[i].message}</span>
            </div>
        </div>
    </li>`);
      } else if (i >= 12 && i <= 15) {
        $('#lequ-box4').append(`<li>
        <div class="yuezhang-box1-l">
            <img src="${arr[i].img}" alt="">
        </div>
        <div class="yuezhang-box-r">
            <a href="">${arr[i].title}</a>
            <a href="">${arr[i].writer}</a>
            <p>${arr[i].content}</p>

            <div class="yuezhang-icon">
                <span class="iconfont">&#xe810;</span>
                <span>5/23</span><span>16:15</span>
            </div>
            <div class="yuezhang-zan">
                <span><span class="iconfont">&#xe630;</span>${arr[i].like}</span>
                <span><span class="iconfont">&#xe659;</span>${arr[i].message}</span>
            </div>
        </div>
    </li>`);
      }
    }

    lunbo1('#lunbo3');
  }
})
// 乐趣结束
// 聊聊开始


$.ajax({
  type: 'get',
  url: 'http://iwenwiki.com/api/blueberrypai/getIndexChating.php',
  success: function (res) {
    res = tupian(res)
    var arr = res.chating;
    // 声明q表示下标
    var q = -1;
    for (var i = 0; i < 3; i++) {
      // 声明空字符串存页面数据
      var n = '';
      for (var j = 0; j < 6; j++) {
        q++
        n += `<li class="chat">
        <div class="chat-l">
            <p>生活${q + 1}</p>
        </div>
        <div class="chat-r">
            <h3>${arr[q].title}</h3>
            <p>${arr[q].content}</p>
        </div>
        </li>`
      }
      $('#lunbo4 .swiper-wrapper').append(`<div class="swiper-slide"><ul>${n}</ul></div>`);
    }

    lunbo1('#lunbo4');
  }
})
// 聊聊结束
// 游记开始



$.ajax({
  type: 'get',
  url: 'http://iwenwiki.com/api/blueberrypai/getIndexTravelnote.php',
  success: function (res) {
    res = tupian(res);

    var arr = res.travelnote;
    var q = -1;

    for (var i = 0; i < 3; i++) {
      var n = "";
      for (var j = 0; j < 4; j++) {
        q++
        n += ` <li>
        <img src="${arr[q].img}"
            alt="">
        <p class="youji-box-p1">${arr[q].title}</p>
        <p class="youji-box-p2">${arr[q].writer}</p>
        <div class="youji-hiddon">
            <p>${arr[q].content}</p>
        </div>
    </li>`;



      }
      // console.log(`<div class="swiper-slide">
      // <ul class="youji-box1">${n}</ul></div>`);
      $('#lunbo5>div').append(`<div class="swiper-slide">
        <ul class="youji-box1">${n}</ul></div>`);
    }
    lunbo1('#lunbo5');
  }
})

// 游记结束
// 其他开始
$.ajax({
  type: 'get',
  url: 'http://iwenwiki.com/api/blueberrypai/getIndexOther.php',
  success: function (res) {
    res = tupian(res);
    var arr = res.otherImgs;
    for (var i = 0; i < arr.length; i++) {
      $('.qita-box').append(`<div>
      <a href="#">
      <img src="${arr[i]}" alt="">
      </a>
      </div>`);
    }
    $('.footle-weibo>img').attr('src', res.weiBoImg);
    $('.footle-weixin>img').attr('src', res.weiXinImg);
    console.log(res.weiBoImg);
    console.log(res.weiXinImg);
  }
})


// 其他结束